<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二.定义样式 复杂性页面根据页面三个简易结构 3.次样式引入 -->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<!-- 增加一个样式 统一去掉页面默认效果 -->
		<link rel="stylesheet" href="css/public.css" />
		 <link rel="stylesheet" href="css/style.css" />
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 设计小米整体简易结构 页头 主体 页尾 
		使用结构化标记：header main footer
		-->
		<header>
			<!-- 控制页面：中控区 -->
			<div id="wrapper">
			    <div class="head_left">
					<ul>
					<li><a href="#">小米网</a></li>
					<li><a href="#">MIUI</a></li>
					<li><a href="#">米聊</a></li>
					<li><a href="#">游戏</a></li>
					<li><a href="#">多看阅读</a></li>
					<li><a href="#">云服务</a></li>
					<li><a href="#">小米网移动版</a></li>
					<li><a href="#">问题反馈</a></li>
					<li><a href="#" class="c">Select Region</a></li>
					</ul>
				</div>
				<div class="head_right">
					<ul>
						<div class="out1">
							<p>购物车中还没有商品，赶紧选购吧！</p>
						</div>
						<!-- 精灵图使用 icon图标
						 1.使用文本样式元素补位 i  b  s  u
						 2.使用矢量图精灵图.png【不失真】
						 优点：避免多次命名  减少服务器请求
						 3.如果使用补位元素 必须内边距撑大 
						 4.定位
						 -->
					 	<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="c">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul>
			  </div>
			  <script>
				  $("header div#wrapper div.head_right ul li.li_right").hover(function(){
				  				 //弹出框  默认隐藏---显示
				  $("header div#wrapper div.head_right ul div.out1").css("display","block");
				  },function(){
				  $("header div#wrapper div.head_right ul div.out1").css("display","none");
				  });
			  </script>
			</div>
			
		</header>
		 <main>
			 <div id="background">
					 <!-- 面包屑导航 nav结构化元素：导航 -->
					 <nav>
					 <div id="diie">
						 <div class="tupian"> 
						   <img src="./img/LOGO.png" alt="" class="LOGO" />
						   <img src="./img/donghua.gif" alt="" class="zuqiu" />
						 </div>
						 <div class="text">
							 <ul>
							 	<li><a href="#">小米盒子</a></li>
							 	<li><a href="#">红米</a></li>
							 	<li><a href="#">平板</a></li>
							 	<li><a href="#">电视</a></li>
							 	<li><a href="#">盒子</a></li>
							 	<li><a href="#">路由器</a></li>
							 	<li><a href="#">智能硬件</a></li>
							 	<li><a href="#">服务</a></li>
							 	<li><a href="#">社区</a></li>
							 </ul>
						 </div>
						 <div class="fangdajing"><i class="jing"></i></div>
						 <div class="sousuo">
							 <span>平衡车</span>
							 <span>小米手机4c</span>
						 </div>
					 </div>
					 </nav>
					 <script>
					 	$(function(){
					 		var yy=$("#diie").offset().top; 
					 							 
					 		$(window).scroll(function(){
					 		var yj=$(window).scrollTop();
					 		if(yj>yy){
					 		$("#diie").addClass("ac");
					 		}else{
					 		$("#diie").removeClass("ac");
					 	}
					 	});
					 	});
					 							 
					 </script>
					 <div id="d">
					 <aside>
						 <!-- 左栏 -->
						 <div>
							<ul>
								<div class="out"></div>
								<li><span>手机 平板 电话卡</span><i></i></li>
								<li><span>电视 盒子</span><i></i></li>
								<li><span>路由器 智能硬件</span><i></i></li>
								<li><span>移动电源 插线板</span><i></i></li>
								<li><span>耳机 音箱</span><i></i></li>
								<li><span>电池 存储卡</span><i></i></li>
								<li><span>保护套 后盖</span><i></i></li>
								<li><span>贴膜 其他配件</span><i></i></li>
								<li><span>米兔 服装</span><i></i></li>
								<li><span>箱包 其他周边</span><i></i></li>
							</ul> 
						<script>
						 $("main div#d aside div ul li").hover(function(){
						 	//弹出框  默认隐藏---显示
						 $("main div#d aside div ul div.out").css("display","block");
						 },function(){
						 $("main div#d aside div ul div.out").css("display","none");
						 });
					 </script>
						 </div>
					 </aside>
					 
					 <!-- 轮播图 figure结构化元素：图片 图表 代码片段-->
					 <figure>
						 <!-- 3.类似于html 固定写法 【小心起名与轮播图框架冲突】 -->
						 <!-- 3.1 main 样式为主 ：引入轮播 -->
						 <div class="main">
						 	<!-- 3.2 id="animation js行为为主 -->
						 	<div id="animation"></div>
						 	<!-- 3.3 class="container" 样式为主 开辟轮播空间-->
						 	<div class="container">
						 	<!-- 3.4选择轮播效果：延迟加载 -->
						 	<div class="banner" id="lazyload">
						 		<ul>
						 			<li><img src="img/banner01.jpg" alt="1" /></li>
						 			<li><img src="img/banner02.jpg" alt="2" /></li>
						 			<li><img src="img/banner03.jpg" alt="3" /></li>
						 			<li><img src="img/banner04.jpg" alt="4" /></li>
						 			<li><img src="img/banner05.jpg" alt="5" /></li>
						 		</ul>
						 		
						 		</div>
						 	</div>
						 </div>
						 <!-- 2.引入jquery封装轮播框架.js文件 -->
					 </figure>
					 </div>
					 <div class="guanggao">
						<img src="./img/left.png" alt="" class="left"/> 
						<img src="./img/subnav_icon01.png" alt="" class="icon01"/>
						<img src="./img/subnav_icon02.jpg" alt="" class="icon02"/>
						<img src="./img/subnav_icon03.png" alt="" class="icon03"/>
					 </div>
					 <!-- 小米明星单品 -->
					 <div id="product">
						 <div><p>小米明星单品</p></div>
						 <div class="fuhao">
						   <div class="fuhao_left"><a href="#"><</a></div>
						   <div class="fuhao_right"><a href="#">></a></div>
						 </div>
					 </div>
					 <!-- 明星单品产品区 -->
					<div id="pt">
					 <div class="container_star">
					 	<dl>
					 		<dt>
					 			<img src="img/chazuo.png" alt="">
					 		</dt>
					 			<dd>小米智能插座&nbsp;基础版</dd>
					 			<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
					 			<dd class="product_price">49元</dd>
					 	</dl>
					</div>
					 <!-- 2 -->
					 <div class="container_star2">
					 	<dl>
					 		<dt>
					 			<img src="img/jinghuaqi.png" alt="">
					 		</dt>
					 			<dd>小米空气净化器2</dd>
					 			<dd class="product_content2">净化能力高达310m3/h</dd>
					 			<dd class="product_price2">699元</dd>
					 	</dl>
					 </div>
					 <!-- 3 -->
					 <div class="container_star3">
					 	<dl>
					 		<dt>
					 			<img src="img/chaban.png" alt="">
					 		</dt>
					 			<dd>小米智能插线板</dd>
					 			<dd class="product_content3">手机远程控制家中电器，智能节电</dd>
					 			<dd class="product_price3">69元</dd>
					 	</dl>
					 </div>
					 <!-- 4 -->
					 <div class="container_star4">
					 	<dl>
					 		<dt>
					 			<img src="img/erji.png" alt="">
					 		</dt>
					 			<dd>小米圈铁耳机</dd>
					 			<dd class="product_content4">动圈+动铁，双发声单元</dd>
					 			<dd class="product_price4">69元</dd>
					 	</dl>
					 </div>
					 <!-- 5 -->
					 <div class="container_star5">
					 	<dl>
					 		<dt>
					 			<img src="img/luyouqi.png" alt="">
					 		</dt>
					 			<dd>小米路由器&nbsp;青春版</dd>
					 			<dd class="product_content5">将高性能路由器，凝聚于掌心大小</dd>
					 			<dd class="product_price5">79元</dd>
					 		
					 	</dl>
					 </div>
					 </div>
					</div>
					<!-- 智能硬件 -->
					<div id="yingjian">
					  <div class="text1"><p>智能硬件</p></div>
					  <div class="text2"><a href="#">查看全部</a><i></i></div>
					  </div>
					  <div id="kuang">
						  <!-- 小孩 -->
					 <div class="child">
						 <dl>
						 	<dt>
						 		<img src="img/haraware_kid.png" alt="">
						 	</dt>
						 		<dd class="child_content1">米兔儿童电话手表</dd>
						 		<dd class="child_content2">安全防走失，宝贝的贴身护卫</dd>
						 		<dd class="child_price">299元</dd>
						 	</dl>
					  </div>
					  <!-- 多图片 -->
					  <div id="kuang2">
					  <div class="duotu">
						  <dl>
						  	<dt>
						  		<img src="img/dianfanbao_icon04.jpg" alt="">
						  	</dt>
						  		<dd>小米体重秤</dd>
						  		<dd class="duotu_content1">高精度压力传感器，手机管理全家健康</dd>
						  		<dd class="duotu_price1">99元</dd>
						  	
						  </dl>
					  </div>
					  <!-- 2 -->
					  <div class="duotu2">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_luyouqi.png" alt="">
					  				</dt>
					  				<dd>小米路由器3</dd>
					  				<dd class="duotu_content2">更安全更稳定，安全发售</dd>
					  				<dd class="duotu_price2">149元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 3 -->
					  <div class="duotu3">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_shouhuan.png" alt="">
					  				</dt>
					  				<dd>小米手环 光感版</dd>
					  				<dd class="duotu_content3">更安全更稳定，安全发售</dd>
					  				<dd class="duotu_price3">149元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 4 -->
					  <div class="duotu4">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_anfang.png" alt="">
					  				</dt>
					  				<dd>小米智能安防套装</dd>
					  				<dd class="duotu_content4">智能警戒，为您的家增添一份安心</dd>
					  				<dd class="duotu_price4">699元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 5 -->
					  <div class="duotu5">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_xiaoyi.png" alt="">
					  				</dt>
					  				<dd>小米运动相机</dd>
					  				<dd class="duotu_content5">边玩边录边拍，手机随时分享</dd>
					  				<dd class="duotu_price5">399元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 6 -->
					  <div class="duotu6">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_xieya.png" alt="">
					  				</dt>
					  				<dd>iHealth智能血压计（蓝牙版）</dd>
					  				<dd class="duotu_content6">送给父母的健康礼物</dd>
					  				<dd class="duotu_price6">199元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 7 -->
					  <div class="duotu7">
					  		<dl>
					  				<dt>
					  					<img src="img/dianfanbao_icon05.jpg" alt="">
					  				</dt>
					  				<dd>小米智能摄像机&nbsp;夜视版</dd>
					  				<dd class="duotu_content7">能看能听能说，手机远程观看</dd>
					  				<dd class="duotu_price7">149元</dd>
					  						  	
					  		</dl>
					  </div>
					  <!-- 8 -->
					  <div class="duotu8">
					  		<dl>
					  				<dt>
					  					<img src="img/haraware_light.png" alt="">
					  				</dt>
					  				<dd>Yeelight床头灯</dd>
					  				<dd class="duotu_content8">触摸式操作，给卧室1600万种颜色</dd>
					  				<dd class="duotu_price8">699元</dd>
					  						  	
					  		</dl>
					  </div>
					  </div>
					 </div>
					</div>
				<!-- 搭配 导航图-->
				  <div id="navigation">
				   	 <div class="text01"><p>搭配</p></div>
					 <div class="text02">
					 	<ul>
					 		<li><a href="">电池储存卡</a></li>
					 		<li><a href="">电源</a></li>
					 		<li><a href="">耳机音箱</a></li>
					 		<li><a href="">热门</a></li>
					 	</ul>
					 </div>
				   </div> 
				   <!-- 搭配图片 -->
				   <div id="photo2">
					   <div class="phototwo">
						   <img src="./img/dapei_icon01.png" alt="" width="210px" height="270px"/>
						   <img src="./img/dapei_icon02.png" alt="" width="210px" height="270px" class="ertu"/>
					   </div>
					   <!-- 八多图大 -->
					   <div class="photolot">
						   <!-- 1. -->
						   <div class="photolot1">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon03.png" alt="">
						   				</dt>
						   				<dd class="photolot_title1">小米路由器3</dd>
						   				<dd class="photolot_content1">更安全更稳定，安全发售</dd>
						   				<dd class="photolot_price1">149元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 2 -->
						   <div class="photolot2">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon04.png" alt="">
						   				</dt>
						   				<dd class="photolot_title2">小米手环 光感版</dd>
						   				<dd class="photolot_content2">实时监测心率，科学运动</dd>
						   				<dd class="photolot_price2">99元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 3 -->
						   <div class="photolot3">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon05.png" alt="">
						   				</dt>
						   				<dd class="photolot_title3">小米智能安防套装</dd>
						   				<dd class="photolot_content3">智能警戒，为您的家增添一份安心</dd>
						   				<dd class="photolot_price3">699元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 4 -->
						   <div class="photolot4">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon06.png" alt="">
						   				</dt>
						   				<dd class="photolot_title4">小米运动相机</dd>
						   				<dd class="photolot_content4">边玩边录边拍，手机随时分享</dd>
						   				<dd class="photolot_price4">399元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 5 -->
						   <div class="photolot5">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon07.png" alt="">
						   				</dt>
						   				<dd class="photolot_title5">小米智能摄像机 夜视版</dd>
						   				<dd class="photolot_content5">能看能听能说，手机远程观看</dd>
						   				<dd class="photolot_price5">149元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 6 -->
						   <div class="photolot6">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon08.png" alt="">
						   				</dt>
						   				<dd class="photolot_title6">小米智能摄像机 夜视版</dd>
						   				<dd class="photolot_content6">能看能听能说，手机远程观看</dd>
						   				<dd class="photolot_price6">149元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 7 -->
						   <div class="photolot7">
						   			<dl>
						   				<dt>
						   					<img src="img/dapei_icon09.png" alt="">
						   				</dt>
						   				<dd class="photolot_title7">小米智能摄像机 夜视版</dd>
						   				<dd class="photolot_content7">能看能听能说，手机远程观看</dd>
						   				<dd class="photolot_price7">149元</dd>
						   						  	
						   			</dl>
						   </div>
						   <!-- 8 -->
						   <div class="photolot8">
						   <li>
							   <img src="./img/content-top_icon01.png" alt="" />
						   		<img src="./img/content-top_icon02.png" alt="" class="photolot8_li2"/>
						   </li>
						   </div>
					   </div>
				   </div>
				   <!-- 周边导航图 -->
				   <div id="zhoubian">
					   <div class="zhoubian1"><a href="#">周边</a></div>
					   <div class="wenzi">
						   <ul>
						   	<li><a href="#">箱包</a></li>
						   	<li><a href="#">生活周边</a></li>
						   	<li><a href="#">米兔</a></li>
						   	<li><a href="#">服装</a></li>
						   	<li><a href="#">热门</a></li>
						   </ul>
					   </div>
				   </div>
				   <!-- 周边结构 -->
				   <div id="zb">
					   <div class="zb1">
						   <ul>
						   	<li class="zbphoto1"><img src="./img/peijian_icon01.png" alt="" /></li>
						   	<li class="zb_img1">
								<dl>
						   				<dt>
						   					<img src="img/peijian_icon03.png" alt="">
						   				</dt>
						   				<dd class="zb_title1">小米金属鼠标垫 小号</dd>
										<dd class="zb_price1">49元</dd>
						   				<dd class="zb_content1">6483人评价</dd>			  	
						   			</dl>
								</li>
						   	<li class="zb_img2">
								<dl>
										<dt>
											<img src="img/peijian_icon04.png" alt="">
										</dt>
										<dd class="zb_title1">小米皮质记事本</dd>
										<dd class="zb_price1">19元</dd>
										<dd class="zb_content1">3050人评价</dd>			  	
									</dl>
							</li>
						   	<li class="zb_img3">
								<dl>
										<dt>
											<img src="img/peijian_icon05.png" alt="">
										</dt>
										<dd class="zb_title1">小米LED随身灯 增强版</dd>
										<dd class="zb_price1">19.9元</dd>
										<dd class="zb_content1">1.6万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="zblast1">
								<dl>
										<dt>
											<img src="img/peijian_icon06.png" alt="">
										</dt>
										<dd class="zb_title1">手机支架 小蜜蜂</dd>
										<dd class="zb_price1">19元</dd>
										<dd class="zb_content1">6.9万人评价</dd>			  	
									</dl>
							</li>
						   </ul>
					   </div>
					   <div class="zb2">
						   <ul>
						   	<li class="zbphoto1"><img src="./img/peijian_icon02.png" alt="" /></li>
						   	<li class="zb_img4">
								<dl>
										<dt>
											<img src="img/peijian_icon07.png" alt="">
										</dt>
										<dd class="zb_title1">小米防尘塞 MI标</dd>
										<dd class="zb_price1">3.9元</dd>
										<dd class="zb_content1">5.6万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="zb_img5">
								<dl>
										<dt>
											<img src="img/peijian_icon08.png" alt="">
										</dt>
										<dd class="zb_title1">小米智能摄像机 夜视版</dd>
										<dd class="zb_price1">149元</dd>
										<dd class="zb_content1">8461人评价</dd>			  	
									</dl>
							</li>
						   	<li class="zb_img6">
								<dl>
										<dt>
											<img src="img/peijian_icon09.png" alt="">
										</dt>
										<dd class="zb_title1">小米电源线收纳盒</dd>
										<dd class="zb_price1">39元</dd>
										<dd class="zb_content1">8861人评价</dd>			  	
									</dl>
							</li>
						   	<li class="zblast2">
									<img src="img/peijian_icon10.png" alt="" />
									<img src="img/content-top_icon02.png" alt="" class="zb_img"/>
							</li>
						   </ul>
					   </div>
				   </div>
				   <!-- 配件导航 -->
				   <div id="peijian">
					   <div class="peijian_text1"><p>配件</p></div>
					   <div class="peijian_text2">
						   <ul>
						   	<li><a href="">其他配件</a></li>
						   	<li><a href="">贴膜</a></li>
						   	<li><a href="">后盖</a></li>
						   	<li><a href="">保护套</a></li>
						   	<li><a href="">热门</a></li>
						   </ul>
					   </div>
				   </div>
				   <!-- 配件 -->
				   <div id="pj">
					   <!-- 第一排 -->
					   <div class="pj_up">
						   <ul>
							   <!-- 1图 -->
						   	<li class="pj_photo1"><img src="./img/zhoubian_icon01.png" alt="" /></li>
						   	<li class="pj_img1">
								<dl>
										<dt>
											<img src="img/zhoubian_icon03.png" alt="">
										</dt>
										<dd class="pj_title1">小米自拍杆</dd>
										<dd class="pj_price1">49元</dd>
										<dd class="pj_content1">6.4万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_img2">
								<dl>
										<dt>
											<img src="img/zhoubian_icon04.png" alt="">
										</dt>
										<dd class="pj_title2">小米手机5 钢化膜（0.22mm）</dd>
										<dd class="pj_price1">29元</dd>
										<dd class="pj_content1">1万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_img3">
								<dl>
										<dt>
											<img src="img/zhoubian_icon05.png" alt="">
										</dt>
										<dd class="pj_title3">红米手机Note3 钢化膜（0.22mm）</dd>
										<dd class="pj_price1">699元</dd>
										<dd class="pj_content1">5.6万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_uplast">
								<dl>
										<dt>
											<img src="img/zhoubian_icon06.png" alt="">
										</dt>
										<dd class="pj_title4">小米Note 标准贴膜（2片装）</dd>
										<dd class="pj_price1">19元</dd>
										<dd class="pj_content1">5.6万人评价</dd>			  	
									</dl>
							</li>
						   </ul>
					   </div>
					   <!-- 第二排 -->
					   <div class="pj_down">
						   <ul>
							   <!-- 2图 -->
						   	<li class="pj_photo2"><img src="./img/zhoubian_icon02.png" alt="" /></li>
						   	<li class="pj_img4">
								<dl>
										<dt>
											<img src="img/zhoubian_icon07.png" alt="">
										</dt>
										<dd class="pj_title1">小米随身WIFI</dd>
										<dd class="pj_price1">19.9元</dd>
										<dd class="pj_content1">31.6万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_img5">
								<dl>
										<dt>
											<img src="img/zhoubian_icon08.png" alt="">
										</dt>
										<dd class="pj_title1">小米百变随身杯</dd>
										<dd class="pj_price1">39元</dd>
										<dd class="pj_content1">1.2万人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_img6">
								<dl>
										<dt>
											<img src="img/zhoubian_icon09.png" alt="">
										</dt>
										<dd class="pj_title1">小米手机5 硅胶保护套</dd>
										<dd class="pj_price1">69元</dd>
										<dd class="pj_content1">215人评价</dd>			  	
									</dl>
							</li>
						   	<li class="pj_downlast">
								<img src="./img/zhoubian_icon10.png" alt="" />
								<img src="./img/content-top_icon02.png" alt="" class="pj_img7"/>
							</li>
						   </ul>
					   </div>
				   </div>
				   <!-- 热评产品 -->
				   <div id="rekuang"><p>热评产品</p></div>
				   <!-- 产品区 -->
				   <div id="produce">
					   <ul>
					   	<li class="pd">
							<dl>
								<dt>
						   			<img src="img/hotproduct_icon01.png" alt="">
						   		</dt>
						   		<dd class="pd_title1">超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</dd>
						   		<dd class="pd_text1">来自于 香草忘忧 的评价</dd>
							    <dt>
								   <li class="pd_k"><a href="#">米兔手机U盘</a></li>
						   		   <dd class="pd_price1">49.9元</dd>			  	
							    </dt>
							</dl>
						</li>
					   	<li class="pd_middle1">
							<dl>
								<dt>
									<img src="img/hotproduct_icon02.png" alt="">
								</dt>
								<dd class="pd_title1">绝对5星，音质挺好，包装也不错，物流也快</dd>
								<dd class="pd_text1">来自于 星星活火 的评价</dd>
							    <dt>
								   <li class="pd_k"><a href="#">小米活塞耳机 标准版</a></li>
								   <dd class="pd_price1">49.9元</dd>			  	
							    </dt>
							</dl>
						</li>
					   	<li class="pd_middle2">
							<dl>
								<dt>
									<img src="img/hotproduct_icon03.png" alt="">
								</dt>
								<dd class="pd_title1">做工没的说，摸起来非常细腻，而且比传统的插板稳固</dd>
								<dd class="pd_text1">来自于 林新城 的评价</dd>
							    <dt>
								   <li class="pd_k"><a href="#">小米插线板</a></li>
								   <dd class="pd_price1">49元</dd>			  	
							    </dt>
							</dl>
						</li>
					   	<li class="pd_last">
							<dl>
								<dt>
									<img src="img/hotproduct_icon04.png" alt="">
								</dt>
								<dd class="pd_title1">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</dd>
								<dd class="pd_text1">来自于 人生如戏 的评价</dd>
							    <dt>
								   <li class="pd_k"><a href="#">小米头戴式耳机 标准版</a></li>
								   <dd class="pd_price1">499元</dd>			  	
							    </dt>
							</dl>
						</li>
					   </ul>
					   <!-- 2 -->
				   </div>
				   <div id="nr"><p>内容</p></div>
				   <!-- 内容 -->
				   <div id="nrjg">
					   <ul>
					   	<li class="nrjg_start">
							<dl>
								<dd class="nr_title1">图书</dd>
								<dd class="nr_content1">阿弥陀佛，么么哒</dd>
								<dd class="nr_text1">大冰新书，12个不舍得读完的、暖心的，真实的江湖故事</dd>
								<dd class="nr_price1">9.99元</dd>
								<dt><img src="img/classify_icon01.png" alt="" /></dt>
							</dl>
						</li>
					   	<li class="nrjg_middle1">
							<dl>
								<dd class="nr_title1">主题</dd>
								<dd class="nr_content1">主题市场</dd>
								<dd class="nr_text1">众多个性主题、百变锁屏与自由桌面让你的手机与众不同！</dd>
								<dd class="nr_price1">MIUI</dd>
								<dt><img src="img/classify_icon02.png" alt="" /></dt>
							</dl>
						</li>
					   	<li class="nrjg_middle2">
							<dl>
								<dd class="nr_title1">游戏</dd>
								<dd class="nr_content1">米柚手游模拟器</dd>
								<dd class="nr_text1">在电脑上玩遍小米所有手游</dd>
								<dd class="nr_price1">免费</dd>
								<dt><img src="img/classify_icon03.png" alt="" /></dt>
							</dl>
						</li>
					   	<li class="nrjg_last">
							<dl>
								<dd class="nr_title1">应用</dd>
								<dd class="nr_content1">2015年度应用</dd>
								<dd class="nr_text1">精彩世界，尽情下载</dd>
								<dd class="nr_price1">免费</dd>
								<dt><img src="img/classify_icon04.png" alt="" /></dt>
							</dl>
						</li>
					   </ul>
				   </div>
				   <!-- 视频导航栏 -->
				   <div id="sp">
					   <li class="sp_1"><p>视频</p></li>
					   <li class="sp_2"><a href="#">查看更多</a><i></i></li>
					</div>
				   <!-- 视频结构 -->
				   <div id="video">
					   <ul>
					   	<li class="video1">
							<dl>
								<dt>
									<img src="img/video_icon01.jpg" alt="">
								</dt>
									<dd class="vd_content1">笑喷了，沈腾爆笑出演，6集联播</dd>
									<dd class="vd_content2">小米Max沈腾爆笑预告全集</dd>
							</dl>
						</li>
					   	<li class="video2">
							<dl>
								<dt>
									<img src="img/video_icon02.jpg" alt="">
								</dt>
									<dd class="vd_content1">小米2016春季新品发布会</dd>
									<dd class="vd_content2">小米5 十余项黑科技亮相</dd>
							</dl>
						</li>
					   	<li class="video3">
							<dl>
								<dt>
									<img src="img/video_icon03.jpg" alt="">
								</dt>
									<dd class="vd_content1">15秒了解小米5 有多快</dd>
									<dd class="vd_content2">华少用超快语速告诉你小米5 到底有多快</dd>
							</dl>
						</li>
					   	<li class="video4">
							<dl>
								<dt>
									<img src="img/video_icon04.jpg" alt="">
								</dt>
									<dd class="vd_content1">《去探索》 小米年度品牌视频</dd>
									<dd class="vd_content2">与小米一起探索黑科技</dd>
							</dl>
						</li>
					   </ul>
				   </div>
				 </main>
		<footer>
			<!-- 页尾导航区 -->
			<div id="yw">
				<ul>
					<li><i class="yw1"></i><a href="">1小时快修服务</a></li>
					<li><i class="yw2"></i><a href="">7天无理由退货</a></li>
					<li><i class="yw3"></i><a href="">15天免费换修</a></li>
					<li><i class="yw4"></i><a href="">满150元包邮</a></li>
					<li><i class="yw5"></i><a href="">520余家售后网点</a></li>
					
				</ul>
			</div>
			<!-- 页尾结构 切片七次 div>7个div-->
			<div class="footer_container">
				<!-- 帮助中心栏 -->
				<div class="column">
					<h3>帮助中心</h3>
					<ul>
						<li><a href="#">购物指南</a></li>
						<li><a href="#">支付方式</a></li>
						<li><a href="#">配送方式</a></li>
					</ul>
				</div>
				<!-- 服务支持栏 -->
				<div class="column">
					<h3>服务支持</h3>
					<ul>
						<li><a href="#">售后政策</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
				<!-- 线下门店栏 -->
				<div class="column">
					<h3>线下门店</h3>
					<ul>
						<li><a href="#">小米之家</a></li>
						<li><a href="#">服务网点</a></li>
						<li><a href="#">线下专区</a></li>
					</ul>
				</div>
				<!-- 关于小米栏 -->
				<div class="column">
					<h3>关于小米</h3>
					<ul>
						<li><a href="#">了解小米</a></li>
						<li><a href="#">加入小米</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!-- 关注我们栏 -->
				<div class="column">
					<h3>关注我们</h3>
					<ul>
						<li><a href="#">新浪微博</a></li>
						<li><a href="#">小米部落</a></li>
						<li><a href="#">官方微信</a></li>
					</ul>
				</div>
				<!-- 特色服务栏 -->
				<div class="column">
					<h3>特色服务</h3>
					<ul>
						<li><a href="#">F码通道</a></li>
						<li><a href="#">小米移动</a></li>
						<li><a href="#">防伪查询</a></li>
					</ul>
				</div>
				<!-- 客服信息栏 -->
				<div class="contact_column">
					<h3>400-100-5678</h3>
					<p>周一至周日 8:00-18:00</p>
					<p>（仅收市话费）</p>
					<a href="#">24小时在线客服</a>
				</div>
			</div>
			<!-- 页尾尾巴 -->
		<div id="ywkuang">
			<div id="ywend">
				<div class="imgmi"><img src="./img/team_logo.png" alt="" /></div>
			<div class="yetext1">
			   <ul>
					<li><a href="">小米网</a></li>
					<li><a href="">MIUI</a></li>
					<li><a href="">米聊</a></li>
					<li><a href="">多看书城</a></li>
					<li><a href="">小米路由器</a></li>
					<li><a href="">视频电话</a></li>
					<li><a href="">小米后院</a></li>
					<li><a href="">小米天猫店</a></li>
					<li><a href="">小米淘宝直营店</a></li>
					<li><a href="">小米网盟</a></li>
					<li><a href="">问题反馈</a></li>
					<li><a href="">Select Region</a></li>
				</ul>
				<div class="tutu">
					<p>©mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014]0059-0009号违法和不良信息举报电话:185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>	
				</div>
			</div>
				<!-- 诚信 -->
				<div class="cx">
					<ul>
						<li><i class="i00"></i><a href="">网上交易保障中心</a></li>
						<li><i class="i11"></i><a href="">可信网站信用评价</a></li>
						<li><i class="i22"></i><a href="">诚信网站师范企业</a></li>
					</ul>
				</div>
			</div>
			<div id="fashao">
				<p>探索黑科技，小米为发烧而生</p>
			</div>
		</div>
		</footer>
		<script src="js/highlight.pack.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>
